﻿/**
 * jquery版放大器
 * @Company: www.css.com.cn
 * @Project: xkcg
 * @Module ID:
 * @Description: jQuery对象放大器
 * @Author(svn): 小可丶同学
 * @version: v1.3
 * @Email: 5545795@qq.com
 * @Created Date: 2011-11-29
 * @modify Date: 2011-12-08
 *
example:
	var settings =  {
		properties: {
			_speed:				//设置动画速度，太慢了，相信你们也不会去做，所以一般不用设置这个。
			top: 50,			//设置放大后的top坐标
			left: 50,			//设置放大后的left坐标
			width: '',			//设置放大后的宽度，默认浏览器宽度60%
			height: '',			//设置放大后的高度，默认浏览器高度60%
			enabledMask: true	//是否启用遮罩，默认启用
		},
		cls: {
			mark: '',			// 标记,用于得到点击对象父级.如果有冲突,请更改这个名称.
			mask: '',			// 遮罩层类,如果想自己写一个这个类样式,则按照设置的类显示,隐藏.
			maskZIndex: 10000,	// 遮罩层的z坐标，默认值 10000
			boxZIndex: 10003,	// 设置box放大后的z-index,不影响原本z-index.默认值10003
			zoomClass: '',		// 设置放大按钮的样式，默认值 'titlebar-max'
			resumeClass: '',	// 设置还原按钮的样式，默认值 'titlebar-resume'
		},
		callback: {
			// 放大后的回调函数
			// box: 被放大的对象
			// option: 初始化参数
			// temp_box: 当前被放大的对象
			onZoom: function(box, option, temp_box){
				//To do the things of you want.
			},
			// 还原后的回调函数
			onResume: function(box, option, temp_box){
				//To do the things of you want.
			}
		}
	}
	$('.box').zoom();
	or
	$('.box').zoom(settings);
 *
 */
jQuery(document).ready(function($){
	$.fn.extend({
		zoom: function(option){
			var obj = $(this), mask, objcss = {}, settings = {
				properties: {
					_speed: 350,
					left: $(window).width() * 0.2/* + $(window).scrollLeft()*/,
					top: $(window).height() * 0.1,
					width: $(window).width() * 0.6,
					height: $(window).height() * 0.8,
					enabledMask: true
				},
				resized: {
					minWidth: 200,
					minHeight: 100,
					maxWidth: 400,
					maxHeight: 200
				},
				cls: {
					mark: 'zoom_mark',
					mask: 'zoom_mask',
					maskZIndex: 10000,
					boxZIndex : 10002,
					zoomClass: 'titlebar-max',
					resumeClass: 'titlebar-resume'
				},
				callback: {
					onZoom: null,
					onResume: null
				}
			};
			$.extend(true, settings, option);

			var zoom_styles = ['width', 'height', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'display', 'position', 'zIndex'];
			function getCssText(obj){
				if(!obj) return;
				var temp = {}, value, style;
				var eleReg = /(\d+[px|pc|pt|em|ex|cm|mm]{0,2})$/;
				for(var i = 0; i < zoom_styles.length; i++){
					value = obj.css(zoom_styles[i]);
					style = zoom_styles[i];
					temp[zoom_styles[i]] = typeof value != 'number' && eleReg.test(value) ? value.match(/[\d]+/) : value == 'auto' ? 0 : value;
				}
				temp.left = obj.offset().left;
				temp.top = obj.offset().top;
				return temp;
			};

			obj.addClass(settings.cls.mark);

			if(obj.length){
				obj.each(function(i){
					var position = $(this).position();
					$(this).css({left : position.left, top: position.top, display: $(this).css('display')});
				});
			}
			obj.css('position', 'absolute');

			if(settings.properties.enabledMask == true){
				mask = $('.' + settings.cls.mask);
				if(mask.length == 0){
					// 创建遮罩层
					mask = $('<div class="zoom_mask"></div>');
					settings.cls.mask = 'zoom_mask';
					mask.appendTo(document.body);
				}
				mask.bind("contextmenu",function(){return false;});
			}

			var zoom = function(zoomer){
				if(!zoomer || zoomer.length == 0 || objcss.isMoving == true) return zoomer;
				objcss.isMoving = true;
				zoomer.find('.' + settings.cls.zoomClass).removeClass(settings.cls.zoomClass).addClass(settings.cls.resumeClass).attr("title", "还原");

				if(!objcss.isZoom){
					objcss = getCssText(zoomer);
					objcss.isZoom = true;
					objcss.box = zoomer;
				}

				if(settings.properties.enabledMask == true){
					// 打开遮罩层
					mask.css({
						zIndex: settings.cls.maskZIndex,
						width: $(document).width() + $(window).scrollLeft(),
						height: $(document).height() + $(window).scrollTop()
					}).toggle(true);
				}
				// 执行动画放大.
				zoomer.css({
					zIndex: settings.cls.boxZIndex
				}).animate({
					left: settings.properties.left - objcss.marginLeft + $(window).scrollLeft(),
					top: settings.properties.top - objcss.marginTop + $(window).scrollTop(),
					width: settings.properties.width,
					height: settings.properties.height,
					marginTop: 0,
					marginLeft: 0
				}, {
					duration: settings.properties._speed,
					step: function(now, fx) {
						var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
						$('body').append('<div>' + data + '</div>');
					},
					complete: function(){
						objcss.isMoving = false;
						if(typeof settings.callback.onZoom == 'function'){
							settings.callback.onZoom($(this), settings, objcss);
						}
					}
				});
			};
			var resume = function(resumer){
				if(!resumer || resumer.length == 0 || objcss.isMoving == true) return resumer;
				objcss.isMoving = true;
				resumer.find('.' + settings.cls.resumeClass).removeClass(settings.cls.resumeClass).addClass(settings.cls.zoomClass).attr("title", "放大");
				if(objcss.isZoom == true){
					objcss.isZoom = false;
					if(settings.properties.enabledMask == true){
						// 关闭遮罩层
						mask.toggle(false);
					}
					//执行动画还原.
					resumer.animate({
						left: objcss.left - objcss.marginLeft,
						top: objcss.top - objcss.marginTop,
						width: objcss.width,
						height: objcss.height,
						marginTop: objcss.marginTop,
						marginLeft: objcss.marginLeft
					}, {
						duration: settings.properties._speed,
						step: function(now, fx) {
							var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
							$('body').append('<div>' + data + '</div>');
						},
						complete: function(){
							resumer.css({zIndex: objcss.zIndex, position: objcss.position || 'absolute', display: objcss.display});
							objcss.isMoving = false;
							if(typeof settings.callback.onResume == 'function'){
								settings.callback.onResume($(this), settings, objcss);
							}
						}
					});
				};
			};
			// 重新定位
			var relocate = function(relocater){
				if(!relocater || relocater.length == 0) return relocater;
				relocater.css({
					zIndex: settings.cls.boxZIndex,
					left: settings.properties.left - objcss.marginLeft + $(window).scrollLeft(),
					top: settings.properties.top - objcss.marginTop + $(window).scrollTop(),
					width: settings.properties.width,
					height: settings.properties.height,
					marginTop: 0,
					marginLeft: 0
				})
			};
			$('.' + settings.cls.zoomClass).live('click', function(){
				if(objcss.isMoving == true) return;
				if(!objcss.isZoom){
					zoom($(this).parents('.' + settings.cls.mark));
				}else if(objcss.isZoom){
					resume(objcss.box);
					objcss.isMoving = false;
					zoom($(this).parents('.' + settings.cls.mark));
				}
			});
			$('.' + settings.cls.resumeClass).live('click', function(){
				if(objcss.isMoving == true) return;
				resume($(this).parents('.' + settings.cls.mark));
			});
			$(window).resize(function(){
				winWidth = $(document).width();
				winHeight = $(document).height();
				if(objcss.isZoom){
					relocate(objcss.box);
				}
			});
			$(window).scroll(function(){
				if(objcss.isZoom){
					relocate(objcss.box);
				}
			});
			return obj;
		}
	});
});